<template>
    <div>
        <div class="mc-common-title">
            <div class="mcct-left">
                <span></span>
                <span>门店信息</span>
            </div>
            <button
                    class="mcct-right"
                    @click="qingchu(),dialogVisible = true"
            >新增门店
            </button>
        </div>
        <el-table
                :data="tableData"
                style="width: 100%"
                :header-cell-style="{ background: '#F2F2F2', color: '#333333' }"
        >
            <el-table-column

                    type="index"
                    label="序号"
            >
            </el-table-column>
            <el-table-column
                    prop="storeCode"
                    label="门店编码"
            >
            </el-table-column>
            <el-table-column
                    prop="storeName"
                    label="门店名称"
            >
            </el-table-column>
            <el-table-column
                    prop="aboutPerson"
                    label="收货人"
            >
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="收货电话"
            >
            </el-table-column>
            <el-table-column
                    prop="storeAddress"
                    label="收货地址"
            >
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100"
            >
                <template slot-scope="props">
                    <el-button
                            @click="dialogVisible2 = true,fabricAfter(props.row.id)"
                            type="text"
                            size="small"
                            :style="{color: '#C29C0F'}"

                    >编辑
                    </el-button>
                    <el-button
                            @click="openquxiao(props.row.id,props.$index)"
                            type="text"
                            size="small"
                            :style="{color: '#C29C0F'}"
                    >删除
                    </el-button>

<!--                    <el-button-->
<!--                            v-if="props.$index==0"-->
<!--                            @click="openaddaddress(props.row.id,props.row.storeCode)"-->
<!--                            type="text"-->
<!--                            size="small"-->
<!--                            :style="{color: '#C29C0F'}"-->
<!--                    >添加地址-->
<!--                    </el-button>-->

<!--                    <el-button-->
<!--                            v-if="props.$index==0"-->
<!--                            @click="openadress(props.row.id)"-->
<!--                            type="text"-->
<!--                            size="small"-->
<!--                            :style="{color: '#C29C0F'}"-->
<!--                    >地址列表-->
<!--                    </el-button>-->

                </template>
            </el-table-column>
        </el-table>

        <el-dialog
                title="收货地址列表"
                :visible.sync="addressVisible"
                width="800px"
                :close-on-click-modal="false"
        >

            <el-table
                    :data="addressData"
                    style="width: 100%"
                    :header-cell-style="{ background: '#F2F2F2', color: '#333333' }"
            >
                <el-table-column

                        type="index"
                        label="序号"
                >
                </el-table-column>
                <el-table-column
                        prop="storeCode"
                        label="门店编码"
                >
                </el-table-column>

                <el-table-column
                        prop="person"
                        label="收货人"
                >
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="收货电话"
                >
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址"
                >
                </el-table-column>
                <el-table-column
                        prop="label"
                        label="标签"
                >
                </el-table-column>

                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100"
                >
                    <template slot-scope="props">

                        <el-button
                                @click="opendeleteaddress(props.row.id)"
                                type="text"
                                size="small"
                                :style="{color: '#C29C0F'}"
                        >删除
                        </el-button>


                        <el-button
                                @click="openupdatestoreaddress(props.row)"
                                type="text"
                                size="small"
                                :style="{color: '#C29C0F'}"
                        >编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>


        </el-dialog>

        <el-dialog
                title="新增门店"
                :visible.sync="dialogVisible"
                width="460px"
                :close-on-click-modal="false"
        >
            <span style="color: #ee0a0a;margin-right: 2px">*</span>门店名称
            <el-input
                    v-model="ruleForm.name"
                    placeholder="请填写门店名称"
                    :style="{marginBottom: '20px', width: '46%', marginRight: '25px',marginLeft:'9px'}"
            ></el-input>
            <br/>
            <!--     <el-input
                         v-model="ruleForm.num"
                         placeholder="请填写门店编号！"
                         :style="{marginBottom: '20px', width: '46%'}"
                 ></el-input> -->
            &nbsp;&nbsp;<span style="color: #ee0a0a;margin-right: 2px">*</span>收货人
            <el-input
                    v-model="ruleForm.aboutPerson"
                    placeholder="请填写收货人"
                    :style="{marginBottom: '20px', width: '46%',marginLeft:'18px'}"
            ></el-input>
            <br/>
            <span style="color: #ee0a0a;margin-right: 2px">*</span>收货电话
            <el-input
                    v-model="ruleForm.phone"
                    placeholder="请填写门店收货电话"
                    :style="{marginBottom: '20px', width: '46%',marginLeft:'12px'}"
            ></el-input>
            <br/>
            <span style="color: #ee0a0a;margin-right: 2px">*</span>收货地址
            <el-input
                    v-model="ruleForm.address"
                    :style="{width: '70%',marginLeft:'12px'}"
                    placeholder="请填写门店收货地址"
            ></el-input>


            <span
                    slot="footer"
                    class="dialog-footer"
            >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
                type="primary"
                @click="handleSubmit"
        >确 定</el-button>
      </span>
        </el-dialog>


        <!-- 添加地址的窗口-->
        <el-dialog
                title="添加常用地址"
                :visible.sync="addaddressVisible"
                width="480px"
                :close-on-click-modal="false"
        >
            <span style="color: #ee0a0a;margin-right: 2px">*</span>常用地址
            <el-input
                    v-model="storeaddress"
                    placeholder="请填写地址"
                    :style="{marginBottom: '20px', width: '76%', marginRight: '25px',marginLeft:'9px'}"
            ></el-input>
            <br/>

            <span style="color: #ee0a0a;margin-right: 2px">*</span>收货人
            <el-input
                    v-model="person"
                    placeholder="请填写收货人"
                    :style="{marginBottom: '20px', width: '46%', marginRight: '25px',marginLeft:'22px'}"
            ></el-input>
            <br/>

            <span style="color: #ee0a0a;margin-right: 2px">*</span>收货电话
            <el-input
                    v-model="phone"
                    placeholder="请填写收货电话"
                    :style="{marginBottom: '20px', width: '46%', marginRight: '25px',marginLeft:'9px'}"
            ></el-input>
            <br/>
            <span style="margin-left: 5px">标 签</span>
            <el-input
                    v-model="label"
                    placeholder="请填写标签(例如:公司/家)"
                    :style="{marginBottom: '20px', width: '46%', marginRight: '25px',marginLeft:'36px'}"
            ></el-input>
            <br/>
            <el-button
                    type="primary"
                    @click="addstoreaddress"
            >确 定
            </el-button>
        </el-dialog>

        <!-- 添加地址的窗口-->
        <el-dialog
                title="编辑地址"
                :visible.sync="updateaddressVisible"
                width="480px"
                :close-on-click-modal="false"
        >
            <span style="color: #ee0a0a;margin-right: 2px">*</span>常用地址
            <el-input
                    v-model="storeaddress"
                    placeholder="请填写地址"
                    :style="{marginBottom: '20px', width: '76%', marginRight: '25px',marginLeft:'9px'}"
            ></el-input>
            <br/>

            <span style="color: #ee0a0a;margin-right: 2px">*</span>收货人
            <el-input
                    v-model="person"
                    placeholder="请填写收货人"
                    :style="{marginBottom: '20px', width: '46%', marginRight: '25px',marginLeft:'22px'}"
            ></el-input>
            <br/>

            <span style="color: #ee0a0a;margin-right: 2px">*</span>收货电话
            <el-input
                    v-model="phone"
                    placeholder="请填写收货电话"
                    :style="{marginBottom: '20px', width: '46%', marginRight: '25px',marginLeft:'9px'}"
            ></el-input>
            <br/>
            <span style="margin-left: 5px">标 签</span>
            <el-input
                    v-model="label"
                    placeholder="请填写标签(例如:公司/家)"
                    :style="{marginBottom: '20px', width: '46%', marginRight: '25px',marginLeft:'36px'}"
            ></el-input>
            <br/>
            <el-button
                    type="primary"
                    @click="updatestoreaddress"
            >确 定
            </el-button>
        </el-dialog>


        <!-- 这里是给编辑用的-->
        <el-dialog
                title="编辑门店"
                :visible.sync="dialogVisible2"
                width="460px"
                :close-on-click-modal="false"
        >
            <span style="color: #ee0a0a;margin-right: 2px">*</span>门店名称
            <el-input
                    v-model="ruleForm.name"
                    placeholder="请填写门店名称"
                    :style="{marginBottom: '20px', width: '46%', marginRight: '25px',marginLeft:'9px'}"
            ></el-input>
            <br/>
            <!-- <el-input
                    v-model="ruleForm.num"
                    placeholder="请填写门店编号！"
                    :style="{marginBottom: '20px', width: '46%'}"
            ></el-input> -->
            &nbsp;&nbsp;<span style="color: #ee0a0a;margin-right: 2px">*</span>收货人
            <el-input
                    v-model="ruleForm.aboutPerson"
                    placeholder="请填写收货人"
                    :style="{marginBottom: '20px', width: '46%',marginLeft:'18px'}"
            ></el-input>
            <br/>
            <span style="color: #ee0a0a;margin-right: 2px">*</span>收货电话
            <el-input
                    v-model="ruleForm.phone"
                    placeholder="请填写门店收货电话"
                    :style="{marginBottom: '20px', width: '46%',marginLeft:'9px'}"
            ></el-input>
            <br/>
            <span style="color: #ee0a0a;margin-right: 2px">*</span>收货地址
            <el-input
                    v-model="ruleForm.address"
                    :style="{width: '80%',marginLeft:'12px'}"
                    placeholder="请填写门店收货地址"
            ></el-input>
            <span
                    slot="footer"
                    class="dialog-footer"
            >
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button
                type="primary"
                @click="updatestore"
        >确 定</el-button>
      </span>
        </el-dialog>


        <!--取消订单的弹框-->
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible3"
                width="30%"
        >
            <span>确定删除门店吗？</span>
            <span slot="footer" class="dialog-footer">
		  <el-button @click="dialogVisible3 = false">取 消</el-button>
		  <el-button type="primary" @click="dialogVisible3 = false,deletestore()">确 定</el-button>
		</span>
        </el-dialog>

        <!--取消订单的弹框-->
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible4"
                width="30%"
        >
            <span>确定删除门店地址吗？</span>
            <span slot="footer" class="dialog-footer">
				   <el-button @click="dialogVisible4 = false">取 消</el-button>
				   <el-button type="primary"
                              @click="dialogVisible4 = false,deletestoreaddress(deladdressId)">确 定</el-button>
				 </span>
        </el-dialog>

    </div>
</template>

<script>
    import {getAction, postAction} from '@/api/manage'

    export default {
        data() {
            return {
                deladdressId: '',
                label: '',
                addressid: '',
                person: '',
                phone: '',
                storeCode: '',
                storeaddress: '',
                addaddressVisible: false,
                addressVisible: false,
                updateaddressVisible: false,
                id: '',
                index: '',
                dialogVisible3: false,
                dialogVisible4: false,
                token: localStorage.getItem("token"),
                storeId: "",
                companyId: "",
                dialogVisible2: false,
                dialogVisible: false,

                currentIndex: 2,
                ruleForm: {
                    name: '',
                    num: "",
                    phone: "",
                    address: "",
                    aboutPerson: "",
                    username: "",
                    dianzhangname: "",
                    dianzhangworknumber: "",
                    dianzhangphone: ""
                },
                // tableData: [
                //     {
                //         index: 1,
                //         storeCode: "11256IU",
                //         storeName: "派定制01",
                //         phone: "0574-0886478",
                //         storeAddress: "宁波鄞州区聚贤路1号",
                //     },
                // ],
                url: {
                    list: '/company/querystoreBycompanyId',
                    add: '/company/addstore',
                    del: '/company/deletestore',
                    detail: '/company/getstorebyid',
                    update: '/company/updatestore',
                    queryCompanyId: '/company/queryCompanyId',
                    queryCompanyCode: "/company/queryCompanyCode",
                    Queryaddress: '/company/getaddressbystoreId',
                    addstoreaddress: '/company/addstoreaddress',
                    deletestoreaddress: '/company/deletestoreaddress',
                    updatestoreaddress: '/company/updatestoreaddress'
                },
                tableData: [],
                addressData: [],
            };
        },
        created() {
            //取到公司id
            getAction(domain.publicUrl + this.url.queryCompanyId, {'token': this.token}).then(res => {
                this.companyId = res.data.data
                this.getDate()
            })
            //取到公司编码
            getAction(domain.publicUrl + this.url.queryCompanyCode, {'token': this.token}).then(res => {
                this.companyCode = res.data.data

            })
        },
        methods: {
            openupdatestoreaddress(record) {
                this.updateaddressVisible = true;
                this.storeaddress = record.address;
                this.phone = record.phone;
                this.person = record.person;
                this.addressid = record.id;
                this.label = record.label;
            },
            opendeleteaddress(id) {
                this.deladdressId = id;
                this.dialogVisible4 = true;
            },
            deletestoreaddress(id) {
                getAction(domain.publicUrl + this.url.deletestoreaddress, {'id': id}).then(res => {
                    if (res.data.code == '0') {
                        this.$message.success("操作成功！")
                        this.openadress(this.id, this.storeCode);
                    }
                })
            },
            updatestoreaddress() {
                let params = {
                    id: this.addressid,
                    address: this.storeaddress,
                    label: this.label,
                    person: this.person,
                    phone: this.phone
                };
                if (this.storeaddress == '' || this.storeaddress == null) {
                    this.$notify.warning({
                        title: "提示",
                        message: "请输入常用地址",
                        duration: 1500,
                    });
                    return;
                }
                if (this.person == '' || this.person == null) {
                    this.$notify.warning({
                        title: "提示",
                        message: "请输入收货人",
                        duration: 1500,
                    });
                    return;
                }
                if (this.phone == '' || this.phone == null) {
                    this.$notify.warning({
                        title: "提示",
                        message: "请输入联系电话",
                        duration: 1500,
                    });
                    return;
                }
                postAction(domain.publicUrl + this.url.updatestoreaddress, params).then(res => {
                    if (res.data.code == '0') {
                        this.$message.success("操作成功！")
                        this.updateaddressVisible = false;
                        this.openadress(this.id, this.storeCode);
                        this.getDate()
                    } else {
                        this.$message.success(res.data.data)
                    }
                })
            },

            addstoreaddress() {
                let params = {
                    id: this.id,
                    address: this.storeaddress,
                    storeCode: this.storeCode,
                    person: this.person,
                    phone: this.phone,
                    label: this.label,
                    companyId: this.companyId,
                    companyCode: this.companyCode
                };
                if (this.storeaddress == '' || this.storeaddress == null) {
                    this.$notify.warning({
                        title: "提示",
                        message: "请输入常用地址",
                        duration: 1500,
                    });
                    return;
                }
                if (this.person == '' || this.person == null) {
                    this.$notify.warning({
                        title: "提示",
                        message: "请输入收货人",
                        duration: 1500,
                    });
                    return;
                }
                if (this.phone == '' || this.phone == null) {
                    this.$notify.warning({
                        title: "提示",
                        message: "请输入联系电话",
                        duration: 1500,
                    });
                    return;
                }
                postAction(domain.publicUrl + this.url.addstoreaddress, params).then(res => {
                    if (res.data.code == '0') {

                        this.$message.success("操作成功！")
                        this.addaddressVisible = false;
                        this.getDate()
                    } else {
                        this.$message.success(res.data.data)
                    }
                })
            },

            //打开添加地址窗口
            openaddaddress(id, storeCode) {
                this.storeaddress = '';
                this.person = '';
                this.phone = '';
                this.label = '';
                this.storeCode = storeCode;
                this.addaddressVisible = true;
                this.id = id;
            },

            //打开收货地址列表
            openadress(id) {
                this.addressVisible = true;
                this.id = id;

                getAction(domain.publicUrl + this.url.Queryaddress, {'storeId': id}).then(res => {
                    this.addressData = res.data.data.records
                })

            },

            // 打开取消顶订单的弹框
            openquxiao(id, index) {
                this.dialogVisible3 = true
                this.id = id
                this.index = index
            },
            fabricAfter(id) {
                this.storeId = id
                getAction(domain.publicUrl + this.url.detail, {'storeId': this.storeId}).then(res => {
                    this.ruleForm.name = res.data.data.storeName;
                    this.ruleForm.num = res.data.data.storeCode;
                    this.ruleForm.phone = res.data.data.phone;
                    this.ruleForm.address = res.data.data.storeAddress;
                    this.ruleForm.aboutPerson = res.data.data.aboutPerson;
                })
            },
            //清除方法
            qingchu() {
                this.ruleForm.name = "";
                this.ruleForm.num = "";
                this.ruleForm.phone = "";
                this.ruleForm.address = "";
                this.ruleForm.aboutPerson = "";
                this.ruleForm.username = "";
                this.ruleForm.dianzhangname = "";
                this.ruleForm.dianzhangworknumber = "";
                this.ruleForm.dianzhangphone = "";
            },

            // 加载数据列表
            getDate() {
                getAction(domain.publicUrl + this.url.list, {
                    'companyId': this.companyId,
                    'token': this.token
                }).then(res => {
                    this.tableData = res.data.data.records
                })
            },

            //删除门店
            deletestore() {
                let storeid = this.id;
                let index = this.index;
                if (index == 0) {
                    this.$message.warning("不能删除默认门店");
                    return;
                }
                getAction(domain.publicUrl + this.url.del, {'storeid': storeid, 'token': this.token}).then(res => {
                    if (res) {
                        this.$message.success(res.data.data);
                        this.getDate()
                    } else {
                        this.$message.error("删除失败！")
                    }
                })
            },
            //编辑修改门店信息
            updatestore() {
                if (this.ruleForm.name == '') {
                    // this.$message.warning("请填写门店名称！")
                    this.$notify.warning({
                        title: "提示",
                        message: "请填写门店名称",
                        duration: 1500,
                    });
                    return;
                }
                if (this.ruleForm.aboutPerson == '') {
                    this.$notify.warning({
                        title: "提示",
                        message: "请填写收货人",
                        duration: 1500,
                    });
                    // this.$message.warning("请填写收货人！")
                    return;
                }
                if (this.ruleForm.phone == '') {
                    this.$notify.warning({
                        title: "提示",
                        message: "请填写联系电话",
                        duration: 1500,
                    });
                    // this.$message.warning("请填写联系电话！")
                    return;
                }
                if (this.ruleForm.address == '') {
                    this.$notify.warning({
                        title: "提示",
                        message: "请填写收货地址",
                        duration: 1500,
                    });
                    // this.$message.warning("请填写收货地址！")
                    return;
                }
                let params = {
                    companyId: this.companyId,
                    id: this.storeId,
                    storeName: this.ruleForm.name,
                    storeCode: this.ruleForm.num,
                    phone: this.ruleForm.phone,
                    storeAddress: this.ruleForm.address,
                    aboutPerson: this.ruleForm.aboutPerson,
                };
                postAction(domain.publicUrl + this.url.update, params).then(res => {
                    if (res.data.code == '0') {

                        this.$message.success("修改成功！")
                        this.dialogVisible2 = false;
                        this.getDate()
                    } else {
                        this.$message.error(res.data.data)
                    }
                })

            },

            //新增
            handleSubmit() {
                if (this.ruleForm.name == '') {
                    // this.$message.warning("请填写门店名称！")
                    this.$notify.warning({
                        title: "提示",
                        message: "请填写门店名称",
                        duration: 1500,
                    });
                    return;
                }
                if (this.ruleForm.aboutPerson == '') {
                    this.$notify.warning({
                        title: "提示",
                        message: "请填写收货人",
                        duration: 1500,
                    });
                    // this.$message.warning("请填写收货人！")
                    return;
                }
                if (this.ruleForm.phone == '') {
                    this.$notify.warning({
                        title: "提示",
                        message: "请填写联系电话",
                        duration: 1500,
                    });
                    // this.$message.warning("请填写联系电话！")
                    return;
                }
                if (this.ruleForm.address == '') {
                    this.$notify.warning({
                        title: "提示",
                        message: "请填写收货地址",
                        duration: 1500,
                    });
                    // this.$message.warning("请填写收货地址！")
                    return;
                }
                let params = {
                    companyId: this.companyId,
                    storeName: this.ruleForm.name,
                    storeCode: this.ruleForm.num,
                    phone: this.ruleForm.phone,
                    storeAddress: this.ruleForm.address,
                    companyCode: this.companyCode,
                    aboutPerson: this.ruleForm.aboutPerson,
                    username: this.ruleForm.username,

                };
                postAction(domain.publicUrl + this.url.add, params).then(res => {
                    if (res.data.code == '0') {
                        this.$message.success("添加成功！")
                        params.index = this.currentIndex;
                        this.tableData.unshift(params);
                        this.ruleForm.name = "";
                        this.ruleForm.num = "";
                        this.ruleForm.phone = "";
                        this.ruleForm.address = "";
                        this.currentIndex++;
                        this.dialogVisible = false;
                    } else {
                        this.$message.error(res.data.data)
                    }
                    this.getDate()
                })

            },
        },
    };
</script>

<style lang="scss" scoped>
    .mc-common-title {
        display: flex;
        justify-content: space-between;
        margin-top: 40px;
        margin-bottom: 20px;

        .mcct-left {
            display: flex;
            align-items: center;

            span:nth-child(1) {
                display: block;
                width: 5px;
                height: 25px;
                background: #4b4b4b;
            }

            span:nth-child(2) {
                font-size: 16px;
                font-weight: 500;
                color: #4e4e4e;
                margin-left: 15px;
            }
        }

        .mcct-right {
            width: 84px;
            height: 38px;
            background: #333333;
            border-radius: 3px;
            color: #f9d532;
            font-size: 14px;
            cursor: pointer;
        }
    }
</style>
